<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
				<image class="search-icon" src="/static/icons/search.png"></image>
				<input type="text" v-model="searchKey" placeholder="搜索成员姓名" @input="handleSearch" />
			</view>
		</view>
		
		<!-- 成员列表 -->
		<view class="member-list">
			<view v-for="(member, index) in filteredMembers" :key="index" class="member-item" :style="{ animationDelay: index * 0.1 + 's' }">
				<view class="member-info">
					<image class="avatar" :src="member.avatarUrl || '/static/images/default-avatar.png'" mode="aspectFill"></image>
					<view class="info-content">
						<view class="name-row">
							<text class="name">{{member.name}}</text>
							<text class="role" :class="getRoleClass(member.role)">{{member.role}}</text>
						</view>
						<view class="detail-row">
							<text class="detail">{{member.politicalStatus}}</text>
							<text class="detail">{{member.phone}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view v-if="filteredMembers.length === 0" class="empty-state">
			<image class="empty-icon" src="/static/icons/empty.png"></image>
			<text class="empty-text">暂无支部成员</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { getDeptUsers } from '@/common/js/api.js';

const userId = uni.getStorageSync('userId');
const members = ref([]);
const searchKey = ref('');

// 过滤后的成员列表
const filteredMembers = computed(() => {
	if (!searchKey.value) return members.value;
	return members.value.filter(member => 
		member.name.toLowerCase().includes(searchKey.value.toLowerCase())
	);
});

// 获取成员列表
const fetchMembers = async () => {
	try {
		const res = await getDeptUsers(userId);
		if (res.code === 200) {
			members.value = res.data.sameDeptPeople;
		} else {
			uni.showToast({
				title: '获取成员列表失败',
				icon: 'none'
			});
		}
	} catch (error) {
		console.error('获取成员列表失败:', error);
		uni.showToast({
			title: '获取成员列表失败',
			icon: 'none'
		});
	}
};

// 处理搜索
const handleSearch = () => {
	// 搜索逻辑已通过计算属性实现
};

// 获取角色样式类
const getRoleClass = (role) => {
	switch(role) {
		case '党支部':
			return 'role-party';
		case '联系人':
			return 'role-contact';
		default:
			return 'role-member';
	}
};

onMounted(() => {
	fetchMembers();
});
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f6f8fc 0%, #f1f4f9 100%);
	padding: 20rpx;
}

.search-box {
	padding: 20rpx;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	
	&:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.12);
	}
	
	.search-input {
		display: flex;
		align-items: center;
		background: rgba(245, 245, 245, 0.8);
		border-radius: 40rpx;
		padding: 20rpx 30rpx;
		transition: all 0.3s ease;
		
		&:focus-within {
			background: #fff;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
		}
		
		.search-icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
			opacity: 0.6;
		}
		
		input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			
			&::placeholder {
				color: #999;
			}
		}
	}
}

.member-list {
	.member-item {
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10px);
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		transform: translateY(0);
		transition: all 0.3s ease;
		animation: slideIn 0.5s ease forwards;
		opacity: 0;
		
		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
		}
		
		.member-info {
			display: flex;
			align-items: center;
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				margin-right: 30rpx;
				border: 4rpx solid #fff;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;
				
				&:hover {
					transform: scale(1.05);
				}
			}
			
			.info-content {
				flex: 1;
				
				.name-row {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					
					.name {
						font-size: 36rpx;
						font-weight: 600;
						color: #333;
						margin-right: 20rpx;
					}
					
					.role {
						font-size: 24rpx;
						padding: 6rpx 20rpx;
						border-radius: 30rpx;
						font-weight: 500;
						transition: all 0.3s ease;
						
						&.role-party {
							background: linear-gradient(135deg, #ff7a45 0%, #ff9a6c 100%);
							color: #fff;
						}
						
						&.role-contact {
							background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
							color: #fff;
						}
						
						&.role-member {
							background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
							color: #fff;
						}
					}
				}
				
				.detail-row {
					display: flex;
					align-items: center;
					
					.detail {
						font-size: 28rpx;
						color: #666;
						margin-right: 30rpx;
						display: flex;
						align-items: center;
						
						&::before {
							content: '';
							display: inline-block;
							width: 8rpx;
							height: 8rpx;
							background: #999;
							border-radius: 50%;
							margin-right: 12rpx;
						}
					}
				}
			}
		}
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 0;
	animation: fadeIn 0.5s ease;
	
	.empty-icon {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 40rpx;
		opacity: 0.8;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #999;
		font-weight: 500;
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
</style> 